<template>
  <div>
    <Header :currentCity="currentCity" :cityList="cityList"></Header>
    <div class="loupan-content">
      <div class="loupan-content-center">
        <ul class="loupan-letter">
          <li v-for="item,index in lpflData" :key="index">
            <a :href="`${prefixUrl}/loupan/${item.letter}`">{{item.letter}}</a>
          </li>
        </ul>
        <ul class="loupan-chilren">
          <li v-for="item,index in lpflData[lpflIndex].letterList" :key="index">
            <a :href="`${prefixUrl}/lpxq/${item.estateId}.html`" :title="item.name" target="_blank">{{item.name}}</a>
          </li>
        </ul>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
  </div>
</template>

<script>
import u from "@/plugins/Ccom";
var head = {
  title: "",
  content: "",
  keywords: "",
};
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: "keywords", content: head.keywords },
        { name: "description", content: head.content },
      ],
    };
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl;
    var currentCity = ctx.currentCity;
    var cityList = ctx.cityList;
    var lpflData = []; // 楼盘分类数据
    var lpflIndex = 0
    // 楼盘分类a-z
    let getQueryHouseByLetterGroup = await u.http({
      url: "/pc/houseInfo/queryHouseByLetterGroup",
      params: {
        cityCode: ctx.cityCode,
      },
    });
    if (getQueryHouseByLetterGroup.code == 200) {
      lpflData = getQueryHouseByLetterGroup.data;
      lpflData.forEach((item,index) => {
        if (item.letter == ctx.params.id) {
          lpflIndex = index
        }
      });
    }
    // 修改TDK
    head.title = `【${currentCity.cityName}楼盘地图|${currentCity.cityName}楼盘导航】-✖✖✖✖✖✖✖✖✖✖`
    head.content = `✖✖✖✖✖✖✖✖✖✖为您提供${currentCity.cityName}楼盘地图，${currentCity.cityName}楼盘导航，找${currentCity.cityName}楼盘就上✖✖✖✖✖✖✖✖✖✖${currentCity.cityName}楼盘大全.`
    head.keywords = `${currentCity.cityName}楼盘地图,${currentCity.cityName}楼盘导航,${currentCity.cityName}楼盘大全`

    return {
      prefixUrl,
      currentCity,
      cityList,
      lpflData,
      lpflIndex,
    };
  },
};
</script>